import React, { Component } from 'react'
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Row, Col, Table, Form, Input, DatePicker, Button ,Pagination} from 'antd';
import { getPaperAnalyzeDetail, getPaperAnalyzeList } from '@/services/paperInfo'
import StudentTypeCascader from '../../Components/StudentTypeCascader/index'
export default class Analyze extends Component<any, any> {
    constructor(props: any) {
        super(props);
        const userinfo = JSON.parse(localStorage.getItem('userinfo'));
        const student_type = userinfo.student_type.split(',').map(Number);
        this.state = {
            start_date: '',
            end_date: '',
            student_type: student_type,
            paper_info: {fail:'',pass:'',good:'',excellent:''},
            data: [],
            count: 1,
            name:'',
            id_number:''
        }
    }
    renderList = (page: string) => {
        const id = this.props.match.params.id;
        const {start_date,end_date,student_type,name,id_number} = this.state;
        getPaperAnalyzeList({ id, page,start_date,end_date,student_type,name,id_number }).then(res => {
            this.setState({
                count: res.count,
                data: res.data
            })
        })
    }
    componentDidMount() {
        const id = this.props.match.params.id;
        getPaperAnalyzeDetail({ id }).then(res => {
            if(!res)return;
            this.setState({
                paper_info: res
            })
        })
        this.renderList('1')
    }
    changeDate = (e: any, d: any) => {
        this.setState({
            start_date: d[0],
            end_date: d[1],
        })
    }
    changeStydentType = (e) => {
        this.setState({
            student_type: e
        })
    }
    changeValue = (e: any, name: string) => {
        this.setState({
            [name]: e.target.value
        })
    }
    changePage=(e)=>{
        this.renderList(e);
    }
    searchHandle=()=>{
        this.renderList('1')
    }
    render() {
        const { student_type, paper_info, count, data } = this.state;
        const result = (grade:number) => {
            const fail = paper_info.fail.split(',');
            const pass = paper_info.pass.split(',');
            const good = paper_info.good.split(',');
            const excellent = paper_info.excellent.split(',');
            if (grade <= fail[1]) return '不合格'
            if (grade >= pass[0] && grade <= pass[1]) return '合格'
            if (grade >= good[0] && grade <= good[1]) return '良好'
            if (grade >= excellent[0]) return '优秀'
        }
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name'
            },
            {
                title: '准考证号',
                dataIndex: 'id_number'
            },
            {
                title: '部门',
                dataIndex: 'student_types'
            },
            {
                title: '答题时长',
                dataIndex: 'duration',
                render:(duration:number)=>{
                    return (duration/1000/60).toFixed(2)+'分钟'
                }
            },
            {
                title: '交卷时间',
                dataIndex: 'time'
            },
            {
                title: '成绩',
                dataIndex: 'grade'
            },
            {
                title: '结果',
                dataIndex: 'grade',
                render:(grade:number)=>{
                   return result(Number(grade))
                }
            }
        ]
        const pass = paper_info ? paper_info.pass.split(',')[0] : 0;
        return (
            <PageContainer title="试卷统计">
                <Card bordered={false} title={'试卷名：' + paper_info.name||''}>
                    <Row>
                        <Col span={10}>
                            <h4>所在科目：{paper_info.subjects}</h4>
                        </Col>
                        <Col span={10}>
                            <h4>应考人数：{paper_info.num}人</h4>
                        </Col>
                        <Col span={10}>
                            <h4>总分：{paper_info.total}分</h4>
                        </Col>
                        <Col span={10}>
                            <h4>平均分：{paper_info.average}分</h4>
                        </Col>
                        <Col span={10}>
                            <h4>及格分：{pass}分</h4>
                        </Col>
                        <Col span={10}>
                            <h4>最高分：{paper_info.max}分</h4>
                        </Col>
                        <Col span={10}>
                            <h4>答题时长：{paper_info.test_time}分钟</h4>
                        </Col>
                        <Col span={10}>
                            <h4>最低分：{paper_info.min}分</h4>
                        </Col>
                        {/* <Col span={10}>
                            <h4>考试时间：2020-10-10 —— 2020-10-20</h4>
                        </Col>
                        <Col span={10}>
                            <h4>考试类型：登录考试</h4>
                        </Col> */}
                    </Row>
                </Card>
                <Card style={{ marginTop: 25 }} bordered={false}>
                    <div style={{ marginBottom: 20, overflow: 'hidden' }}>
                        <Form layout="inline" style={{ float: 'right' }}>
                            <Form.Item>
                                <StudentTypeCascader value={student_type} onChange={this.changeStydentType} />
                            </Form.Item>
                            <Form.Item>
                                <DatePicker.RangePicker placeholder={['开始时间', '结束时间']} onChange={this.changeDate} />
                            </Form.Item>
                            <Form.Item>
                                <Input placeholder="姓名" onChange={(e) => this.changeValue(e, 'name')}></Input>
                            </Form.Item>
                            <Form.Item>
                                <Input placeholder="准考证号" onChange={(e) => this.changeValue(e, 'id_number')}></Input>
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" onClick={this.searchHandle}>搜索</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <Table columns={columns} pagination={false} dataSource={data} rowKey="id"></Table>
                    <Pagination showSizeChanger={false} style={{ float: 'right', marginTop: 20 }} onChange={this.changePage} total={count} showQuickJumper showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />
                </Card>
            </PageContainer>
        )
    }
}
